<template>
  <view class="error-tips" v-show="visible">{{ errorText }} </view>
</template>
<script setup lang="ts">
const props = defineProps<{
  visible: boolean
  errorText: string
}>()
const emit = defineEmits<{
  (e: 'update:visible', visible: boolean): void
}>()
watch(
  () => props.visible,
  (visible) => {
    if (visible) {
      setTimeout(() => {
        emit('update:visible', false)
      }, 3000)
    }
  }
)
</script>
<style lang="less">
.error-tips {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  color: #fff;
  font-size: 28rpx;
  background-color: #c80000;
  transition: all 0.4s ease-in-out 3s;
  opacity: 0.8;
}
</style>
